<template>
	<view>
		<baseForm :column.sync="column" :button="button" @changeColumn="changeColumn"></baseForm>
		<view v-if="menuInfo.list.length !==0">
			<scroll-view class="listBox" @scrolltolower="lower" scroll-y="true" @scroll="scroll" :style="{ height: screenHeight + 'px' }">
				<view class="menu">
					<view class="tit">
						<text>姓名</text>
						<text>状态</text>
					</view>
					<view class="borderBottom column" v-for="(item, index) in menuInfo.list" :key="index" :class="menuInfo.base.class">
						<text v-text="item[ele]" v-for="(ele, index) in menuInfo.base.menuProp" :key="index"></text>
					</view>
				</view>
			</scroll-view>
		</view>
		<text v-else class="noRecord" v-cloak>暂无数据</text>
	</view>
</template>

<script>
	import baseForm from '@/wxcomponents/form/form.vue';
	import {format} from '@/libs/common.js';
	import userMixins from '@/libs/userMixins.js';
	import formMixins from '@/libs/formMixins.js';
	import dictMixins from '@/libs/dictMixins.js';
	import dormMixins from '@/libs/dormMixins.js';
	export default {
		mixins: [userMixins, formMixins, dictMixins, dormMixins],
		data() {
			let self = this;
			return {
				screenHeight: 296,
				button: {
					hide: true
				},
				menuInfo: {
					base: {
						menuProp: ['stuName', 'status'],
						tit: ['姓名', '状态'],
						loadMore: true
					},
					list: []
				},
				column: [
					{
						label: '查寝日期',
						value: format('YY-mm-dd', new Date()),
						required: true,
						name: 'checkingDate',
						type: 'picker',
						mode: 'date',
						text: format('YY-mm-dd', new Date())
					},
					{
						label: '楼栋',
						name: 'bdId',
						type: 'picker',
						required: true,
						disabled: false,
						value: '',
						text: '请选择',
						mode: 'selector',
						range: []
					},
					{
						label: '楼层',
						name: 'flrId',
						type: 'picker',
						required: true,
						disabled: false,
						value: '',
						text: '请选择',
						mode: 'selector', 
						async fetchData() {
							
						},
						range: []
					},
					{
						label: '房号',
						name: 'roomId',
						type: 'picker',
						required: true,
						disabled: false,
						value: '',
						text: '请选择',
						mode: 'selector', 
						async fetchData() {
							
						},
						range: []
					},
				],
				changeModel: [],
				pageParams: {
					pageNum: 1,
					pageSize: 20
				},
				fetchParams: {
					bdId: '',
					flrId: '',
					roomId: ''
				}
			};
		},
		onShow() {
			this.fetchBuildRange();
			this.EventBus.on('pickerChange', obj => {
				if (this[obj.key + 'Change']) {
					this[obj.key + 'Change'](obj.value);
				}
			})
		},
		methods: {
			// 获取楼栋选择范围
			async fetchBuildRange() {
				let list = await this.fetchBuild({...this.pageParams});
				let range = list.map(item => {
					let obj = {
						name: item.bdName,
						value: item.id,
						id: item.id
					}
					return obj;
				})
				this.column[1].range = range;
			},
			// 日期选项更新
			async checkingDateChange(checkingDate) {
				this.fetchParams.checkingDate = checkingDate;
				this.fetchData();
			},
			/**
			 * 楼栋选择更新
			 * */
			async bdIdChange(bdId) {
				// 参数更新
				this.fetchParams = {
					bdId,
					flrId: '',
					roomId: ''
				}
				// 清空楼层、房间选择范围
				this.column[2].range = this.column[3].range = [];
				// 清空楼层、房间当前选中
				this.column[2].text = this.column[3].text = '请选择';
				// 请求楼层选择
				let list = await this.fetchFloor({...this.fetchParams,...this.pageParams});
				let range = list.map(item => {
					let obj = {
						name: item.flrName,
						value: item.id,
						id: item.id
					}
					return obj;
				})
				this.column[2].range = range;
				// 清空当前数据
				this.menuInfo.list = [];
			},
			/**
			 * 楼层选择更新
			 * */
			async flrIdChange(flrId) {
				// 参数更新
				this.fetchParams = {
					bdId: this.fetchParams.bdId,
					flrId,
					roomId: ''
				}
				// 清空房间选择范围
				this.column[3].range = [];
				// 清空房间选择当前选中
				this.column[3].text = '请选择';
				// 请求房间选择
				let list = await this.fetchRoom({...this.fetchParams,...this.pageParams});
				let range = list.map(item => {
					let obj = {
						name: item.roomCode,
						value: item.id,
						id: item.id
					}
					return obj;
				})
				this.column[3].range = range;
				// 清空当前数据
				this.menuInfo.list = [];
			},
			/**
			 * 房间选择更新
			 * */
			async roomIdChange(roomId) {
				// 参数更新
				this.fetchParams = {
					checkingDate: this.column[0].value,
					bdId: this.fetchParams.bdId,
					flrId: this.fetchParams.flrId,
					roomId,
				}
				this.fetchData();
			},
			// 加载下一页
			addPage() {
				this.pageParams.pageNum++;
				this.fetchData();
			},
			lower(e) {
				if (this.menuInfo.base.loadMore) {
					this.addPage()
				} else {
					uni.showToast({
						title: '没有更多了',
						icon: 'none'
					});
				}
			},
			scroll(e) {},
			async fetchData() {
				// 请求宿舍学生信息
				let cannotReq = Object.values(this.fetchParams).some(value => {
					return !value;
				});
				if (cannotReq)	return;
				let resp = await this.fetchRoomStu({...this.fetchParams,...this.pageParams});
				this.menuInfo.list = resp.rows.map(item => {
					item.status = this.getDictNameWithCodeAndValue('dict_dormitory_checking_status', item.status);
					if (!item.status)	item.status = '未查寝';
					return item;
				});
			}
		},
		components: {
			baseForm,
		},

		watch: {
		}
	};
</script>

<style lang="scss" scoped>
	.menu {
		padding: 0 50upx 120upx 50upx;
	
		.column {
			display: flex;
			align-items: center;
			justify-content: space-between;
			line-height: 80upx;
		}
		.tit {
			display: flex;
			justify-content: space-between;
	
			text {
				font-size: 28upx;
				line-height: 100upx;
				font-weight: 600;
			}
		}
	}

	.noRecord {
		text-align: center;
		font-size: 30upx;
		display: inline-block;
		width: 100%;
	}
</style>
